<style scoped lang="scss">
    .searchBarWrapper {
        position: absolute;
        top: 40px;
        width: 100%;
        z-index: 998;
        padding-left: 20px;
        left: 0px;
        background: #fff;
    }

    .supplierBlock {
        display: flex;
        margin-bottom: 20px;

        .erpimage {
            width: 55px;
        }

        .rightContainer {
            padding-left: 10px;

            h3 {
                padding: 0px;
                margin: 0px;
                padding-bottom: 10px;
            }
        }
    }

    .wrapperSubmitButton {
        position: fixed;
        bottom: 0px;
        left: 0px;
        padding-bottom: 20px;
        padding-top: 20px;
        padding-left: 20px;
        width: 100%;
        background: #fff;

        .submitButton {
            border-radius: 20px;
            width: 90%;
        }
    }


    ::v-deep .valueClass {
        text-align: left;
        padding-left: 10px;
        color: #222;
    }


</style>
<template>
    <div class="content">
        <div>


            <section>
                <!--供应商信息-->
                <van-pull-refresh v-model="loading" @refresh="onRefresh" style="min-height:100vh;">
                    <div style="padding:15px;margin-top: 50px;">
                        <van-radio-group v-model="supplierId" :max="1">
                            <div v-for="(supplier,index) in dataList" :key="index"
                                 class="supplierBlock"
                            >
                                <van-radio :name="supplier.id"
                                ></van-radio>
                                <section style="display: flex;margin-left:5px;">
                                    <div class="rightContainer">
                                        <h3>
                                           <span style="margin-right: 5px"> {{supplier.supplierName}}</span>
                                            <dicTag :value="supplier.payType"
                                            :code="$dic.purchase.purchase_pay_type"
                                            ></dicTag>
                                        </h3>
                                    </div>
                                </section>
                            </div>
                        </van-radio-group>
                    </div>
                </van-pull-refresh>


            </section>
        </div>
    </div>
</template>
<script lang="ts">
    import {defineComponent} from 'vue';
    import * as api from '@/api/material.api'
    import {Supplier} from "@/types/supplier";
    import ErpImage from '@/components/ErpImage/index.vue'
    import DicTag from '@/components/DicTag/dic-tag.vue';
    import {concatList, findInArray} from "@/utils/lodashUtils";
    import {alertFail} from "@/utils/alertUtils";
    export default defineComponent({
        data() {
            return {
                loading: false,
                show: false,
                total: 0,
                queryParams: {
                    materialId: 0,
                    pageSize: 10,
                    pageNum: 1,
                },
                dataList: [],
                supplierId: "",
                supplierName: "",
                supplierCode: "",
                checkedSupplierId: '',
            }
        },
        props: {},
        watch: {
            "$props._supplierName"(name) {
                this.supplierName = name
            }

        },
        mounted() {
            // this.getInfoList();
        },
        components: {
            ErpImage,
            DicTag,
        },
        methods: {
            onSearch() {
                this.queryParams.pageNum = 1;
                this.dataList = [];
                this.getInfoList();
            },
            /**
             * @description:
             * @params
             * @return
             */
            initByDialog(_data : any) {
                this.show = true;
                this.supplierId = _data.supplierId;
                this.supplierName = _data.supplierName;
                this.queryParams.materialId =  _data.materialId;
                this.getInfoList();
            },
            triggerShow() {
                this.show = true;
            },
            async getInfoList() {
                var result = await api.getmaterailsupplierlist(this.queryParams);
                this.total = result.count || 0;
                var supplierList = result.data || [];
                console.log('供应商列表', supplierList);
                this.dataList = supplierList
            },


            async onRefresh() {
                console.log('onRefresh')
                this.queryParams.pageNum = Number(this.queryParams.pageNum) + 1;
                var result = await api.getmaterailsupplierlist(this.queryParams);
                this.total = result.count || 0;
                var supplierList = result.data || [];
                concatList(this.dataList, supplierList, 'id','top')
                console.log('新的数据是', this.dataList)
                this.loading = false

            },

            getlist() {

            },
            submitByDialog() {
                if (!this.supplierId) {
                    alertFail('请选择供应商')
                    return {success: false}
                }
                var supplierOne = findInArray(this.dataList, item => item.id == this.supplierId)
                return {
                    success: true,
                    data: {
                        supplierId: supplierOne && supplierOne.supplierId,
                        supplierName: supplierOne && supplierOne.supplierName,
                        supplierCode: supplierOne && supplierOne.code,
                        payType: supplierOne && supplierOne.payType,
                    }
                }
            }


        }
    });
</script>
